<div id="index" class="displaynone">
<div>
    <div class="row" style="margin-top:20px;margin-bottom:20px;" v-show="loading">
        <div class="loader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>

	<div class="container-fluid" style="padding:20px 30px;" v-show="!loading">
        <!-- 数据展示 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th width="10%">编号</th>
                            <th width="20%">姓名</th>
                            <th width="15%">身份</th>
                            <th width="20%">手机</th>
                            <th width="15%">区县</th>
                            <th width="20%">抽中奖项</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in recordInfo" :key="item.id">
                            <td>{{index+1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.identity}}</td>
                            <td>{{item.phone}}</td>
                            <td>{{item.county}}</td>
                            <td>{{item.reward}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="row">
            <div class="col-md-12" style="text-align: center;">
                <nav aria-label="Page navigation">
                    <ul class="pagination nomargintop">
                        <li>
                            <a href="javascript:;" aria-label="Previous" v-on:click="Previous()">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="page in pageArr">
                            <a v-if="page==pageon" class="pageon" href=" javascript:;" v-on:click="changepage(page)">{{page}}</a>
                            <a v-if="page!=pageon" href=" javascript:;" v-on:click="changepage(page)">{{page}}</a>
                        </li>
                        <li>
                            <a href="javascript:;" aria-label="Next" v-on:click="Next()">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div style="text-align:center;">当前共{{pages}}页</div>
            </div>
        </div>

        <div class="modal fade" id="ModalOK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">提示</h4>
                    </div>
                    <div class="modal-body">
                        保存成功
                    </div>
                    <div class="modal-footer">
                        <router-link to="/"><button type="button" class="btn btn-primary" data-dismiss="modal">确定</button></router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    var indexdata={
        loading:true,
        recordInfo:[],
        pages:0,
        pageArr:[],
        pageon:1,
        success:false
    };

    const Index = {
        template: $('#index').html(),
        created () {
            // 组件创建完后获取数据，
            this.loading=true;
            this.fetchData();
        },

        data:function () {
            return indexdata;
        },

        methods:{
            //改变页数
            changepage:function(page) {
                this.pageon = page;
            },

            //上一页Previous
            Previous:function() {
                if (this.pageon > 1) {
                    this.pageon--;
                }
            },

            //下一页Next
            Next:function() {
                if (this.pageon < this.pages) {
                    this.pageon++;
                }
            },

            //加载数据
            fetchData:function () {
                var _self=this;
                _self.loading=true;
                _self.pageon = 1;
                _self.pages = 0;
                _self.pageArr = [];
                _self.recordInfo = [];

                $.ajax({
                    url: "/record/Record/search",
                    type: "post",
                    dataType:'json',
                    data: {
                        "page": 1
                    },
                    success:function(data){
                        //console.log(data);
                        if(data.status==1){
                            _self.recordInfo = data.data;
                            _self.pages = data.pages;
                            _self.pageArr = _self.pageshow(_self.pageon,_self.pages);
                            setTimeout(function(){_self.loading=false;},1000);
                        }else{
                            if(data.message=='未找到信息'){
                                setTimeout(function(){_self.loading=false;},1000);
                            }else{
                                alert('获取数据失败，请重试！');
                                _self.loading=false;
                            }
                        }
                    },
                    error:function(){alert('获取数据失败，请重试！');_self.loading=false;}
                })
            },

            //分页设置
            pageshow:function(pageon, pages) {
                var pageArr = []
                if (pages > 7) {
                    if (3 < pageon && pageon < pages - 2) {
                        pageArr = [];
                        pageArr = [pageon - 3, pageon - 2, pageon - 1, pageon, pageon + 1, pageon + 2, pageon + 3];
                    } else if (4 > pageon) {
                        pageArr = [1, 2, 3, 4, 5, 6, 7];
                    } else if (pages - 3 < pageon) {
                        pageArr = [pages - 6, pages - 5, pages - 4, pages - 3, pages - 2, pages - 1, pages];
                    }
                } else {
                    pageArr = [];
                    for (var i = 0; i < pages; i++) {
                        pageArr.push(i + 1);
                    }
                }
                return pageArr;
            },

            //重置
            reset:function(){
                    this.loading=true;
                    this.recordInfo=[];
                    this.pages=0;
                    this.pageArr=[];
                    this.pageon=0;
                    this.success=false;
            }
        },

        //监听
        watch: {
            pageon:function(){
                if (this.pageon == 0) {
                    return false;
                }
                var _self=this;
                _self.loading=true;
                $.ajax({
                    url: "/record/Record/search",
                    type: "post",
                    dataType:'json',
                    data: {
                        "page": _self.pageon
                    },
                    success:function(data){
                        if(data.status==1){
                            _self.recordInfo = data.data;
                            _self.pages = data.pages;
                            _self.pageArr = _self.pageshow(_self.pageon,_self.pages);
                            setTimeout(function(){_self.loading=false;},1000);
                        }else{
                            alert('获取数据失败，请重试！');
                            _self.loading=false;
                        }
                    },
                    error:function(){alert('获取数据失败，请重试！');_self.loading=false;},
                })
            }
        }
    }
</script>
